<template>
  <div class="activity">

    <!--S顶部搜索-->
    <div id="search" ref="search">
        <form action="" @submit.prevent="submitSearch">
            <cube-input class="input" v-model.trim="search.keyword" type="search" placeholder="搜索活动"></cube-input>
            <cube-button class="search-type" :primary="true" :inline="true" @click="selectSearchType">{{search.select_text}}</cube-button>
            <i v-show="search.is" class="close-search cubeic-close" @click="closeSearch"></i>
        </form>
    </div>
    <!--S顶部搜索-->

    <!--S主体-->
    <cube-scroll ref="scroll" class="main-scroll" :style="{height:page_height+'px'}" :options="scroll_options"  @pulling-up="upGetList">
      <div id="ul" v-if="list.length > 0">
<!--        <div class="li">-->
<!--          <img class="cover" src="../../theme/images/index.svg" @load="$refs.scroll.refresh()"/>-->
<!--          <p class="name">名称这是活动名称这是霍东阁名称</p>-->
<!--          <p class="address">活动地址:活动地址活动地址活动地</p>-->
<!--          <p class="time">活动时间:2019-10-29 12:00至2019-10-29 12:00</p>-->
<!--          <p class="id">活动id:10</p>-->
<!--          <p class="status">未开始</p>-->
<!--          <div class="buttons">-->
<!--            <cube-button class="button" :primary="true" @click="goCoupon(1)">投放卡券</cube-button>-->
<!--            <cube-button class="button" :primary="true"><router-link class="a" to="/coupon/1">已投放列表</router-link></cube-button>-->
<!--            <cube-button class="button" :primary="true"><router-link class="a" to="/coupon/1">发放列表</router-link></cube-button>-->
<!--          </div>-->
<!--        </div>-->
          <div class="li" v-for="(item,index) in list">
            <img class="cover" :src="item.cover" @load="$refs.scroll.refresh()"/>
            <p class="name">{{item.name}}</p>
            <p class="address">活动地址:{{item.address}}</p>
            <p class="time">活动时间:{{item.start_time}}至{{item.end_time}}</p>
            <p class="id">活动id:{{item.id}}</p>
            <p class="status">
                <template v-if="item.status == 1">未开始</template>
                <template v-else-if="item.status == 2">进行中</template>
                <template v-else>结束</template>
            </p>
            <div class="buttons">
                <cube-button class="button" :primary="true"><router-link class="a" :to="'/coupon/1/'+item.id">投放卡券</router-link></cube-button>
<!--              <cube-button class="button" :primary="true"><router-link class="a" to="/coupon/1">发放列表</router-link></cube-button>-->
            </div>
          </div>
      </div>
      <empty v-else>系统暂无可投放活动</empty>
    </cube-scroll>
    <!--E主体-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
import empty from '../../components/empty/Empty.vue';
export default {
  name: 'activity',   //活动列表
  data(){
    return {
      page_height: store.state.height,
      search:{
        is:false,
        keyword:'',  //搜索关键词
        type:'id',   //id,名称,地区
        select_type:null,  //搜索类别
        select_text:'搜索id',
        select_value:'id'
      },
      scroll_options: {
        pullUpLoad: {
          txt: {
            more: '上拉加载更多',
            noMore: '----我也是有底线的----'
          }
        }
      },
      list:[],   //活动列表
      limit:[0,5]   //获取下标
    }
  },
  components:{
    empty
  },
  created(){
    this.getList();
  },
  mounted(){
      setTimeout(()=>{
          this.page_height = document.documentElement.clientHeight - this.$refs.search.getBoundingClientRect().height;
      },300);
  },
  methods:{
    //前往卡券列表，投放列表
    goCoupon(activity_id){
      this.$router.push('/coupon/1/'+activity_id);
    },
    //获取活动列表
    getList(){
      var data = {
          pages:'activityS',
          doing:'getList',
          limit:this.limit
      }
      if(this.search.is){
          data.search_keyword = this.search.keyword;
          data.search_type = this.search.select_value;
      }
      this.$http.post(sysinfo.url,Qs.stringify(data))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.list.push(...res.data.data);
                  this.$refs.scroll.forceUpdate(true,true);
                  this.limit[0] += this.limit[1];
                }else{
                  this.$refs.scroll.forceUpdate(false,false);
                }
                this.$nextTick(()=>{
                  this.$refs.scroll.refresh();
                });
              })
              .catch(error=>console.log(error));
    },
    //上拉加载
    upGetList(){
      this.getList();
    },
    //显示搜索类别
    selectSearchType(){
        var select = [
            {text:'搜索id',value:'id'},
            {text:'活动名称',value:'name'},
            {text:'活动地址',value:'address'}
        ];
        if(!this.search.select_type){
            this.search.select_type = this.$createPicker({
                title: '选择搜索类型',
                data: [select],
                onSelect:(res,index)=>{
                    this.search.select_text = select[index[0]].text;
                    this.search.select_value = select[index[0]].value;
                }
            })
        }
        this.search.select_type.show();
    },
    //搜索
    submitSearch(){
        if(this.search.keyword == ''){
            this.$createToast({
                time: 1000,
                txt: '搜索内容不能为空',
                type:'error'
            }).show();
            return false;
        }
        this.search.is = true;
        this.limit = [0,5];
        this.list = [];
        this.getList();
    },
    //关闭搜索
    closeSearch(){
        this.search.is = false;
        this.search.keyword = '';
        this.limit = [0,5];
        this.list = [];
        this.getList();
    }
  }
}
</script>

<style scoped>
  #search{
      position: fixed;
      width:100%;
      height:50px;
      z-index:10;
      background: #fff;
      top:0;
      left:0;
      border-bottom: 1px solid #eee;
      padding:0 10px;
      box-sizing: border-box;
  }
  #search .input{
       width:275px;
       margin-top: 5px;
  }
  #search .search-type{
      position: absolute;
      right:12px;
      top:4px;
      width:80px;
      height:42px;
      float: left;
      font-size:14px;
      border:1px solid #eee;
      color:#E3E3E3;
  }
  #search .close-search{
      position: absolute;
      top:8px;
      right:95px;
      font-size:30px;
      color:#bbb;
  }
  .main-scroll{
      position: absolute;
      width:100%;
      top:50px;
  }
  #ul{
    padding:0 10px;
  }
  #ul .li{
    position: relative;
    padding-top: 10px;
    box-sizing: border-box;
    font-size:16px;
    overflow: hidden;
  }
  #ul .li img.cover{
    display: block;
    width:100%;
    height:160px;
    object-fit: cover;
  }
  #ul .li .name{
    padding:3px 0;
    line-height: 105%;
    box-sizing: border-box;
  }
  #ul .li .address{
    padding:3px 0;
    font-size:14px;
  }
  #ul .li .time{
    padding:3px 0;
    font-size:14px;
  }
  #ul .li .status,#ul .li .id{
    position: absolute;
    top:50px;
    left:0;
    display: inline-block;
    padding:3px 10px;
    color:#fff;
    background:rgba(252,145,83,0.8);
    border-radius: 0 10px 10px 0;
  }
  #ul .li .id{
    top:20px;
  }
  #ul .li div.buttons .button{
    width:100%;
    height:40px;
    padding:0;
    font-size:16px;
    float:left;
    border-radius: 0;
    border-right:1px solid #fff;
  }
  #ul .li div.buttons .a{
      color:#fff;
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
  }
  #ul .li div.buttons .button:nth-last-child(1){
    border-right: none;
  }
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .cube-pullup-wrapper
    color:#ccc;
    font-size:14px;
</style>
